import React from "react";
import {Link} from "react-router-dom"
import PageTitle from "../../../component/main_title/main_title"
import Pagination from "rc-pagination"
import {BaseReq} from "../../../utils/baseReq"
import "./product_detail.scss"
const baseReq=new BaseReq()
class ProductDetail extends React.Component{
    constructor(props){
        super(props)
       
        this.state={
           id:1,
            productListByCategory:[]
            
        }   
        
        
    }
    onChange(e){
        let data={
                "type_list":[this.props.id],
                "page":e-1,
                "size":10
            }
            baseReq._axios({
                    url:"product/product_info/list",
                    type:"post",
                    data:JSON.stringify(data)
                },(res)=>{
                    console.log(res)
                    this.setState({
                        productListByCategory:res.data.data
                    })
                })
        
    }
    componentWillReceiveProps(nextProps) {
        
        
          this.state.id=nextProps.id
          
          this.getProductDetailByCatagory() 
        
      }
    componentWillMount(){
        // if(this.props.match){
        //     this.setState({
        //        id: this.props.match.params.id
        //     })
        // } 
        
        // let data={
        //     "type_list":[this.props.id],
        //     "page":0,
        //     "size":10
        // }
        // baseReq._axios({
        //     url:"product/product_info/list",
        //     type:"post",
        //     data:JSON.stringify(data)
        // },(res)=>{
        //     console.log(res)
        //     this.setState({
        //         productListByCategory:res.data.data
        //     })
        // })
    }
    componentDidMount(){
        
        console.log(this.state)
        // this.getProductDetailByCatagory()
    }
    getProductDetailByCatagory(){
        let data={
            "type_list":[this.state.id],
            "page":0 ,
            "size":10
        }
        baseReq._axios({
            url:"product/product_info/list",
            type:"post",
            data:JSON.stringify(data)
        },(res)=>{
            this.setState({
                productListByCategory:res.data.data
            })
        })
    }
    render(){
        // console.log(this.props)
        return(
            
            <div >
                <PageTitle title="商品详情" />
                
                <div className="row">
                    <div className="col-md-12">
                       <table className="table table-striped table-bordered">
                            <thead>
                                <tr>
                                <td>ID</td>
                                <td>商品名称</td>
                                <td>商品价格</td>
                                <td>库存</td>
                                <td>商品描述</td>
                                <td>操作</td>
                                </tr>
                            </thead>
                            <tbody>
                            { this.state.productListByCategory.map((item,index)=>{
                              return(
                                <tr key={index}>
                                <td>{item.productId}</td>
                                <td>{item.productName}</td>
                                <td>¥{item.productPrice}</td>
                                <td>{item.productStock}</td>
                                <td>{item.productDescription}</td>
                                <td>
                                    <Link className="edit" to={{pathname:"/product/save",
                                                                query:{productId:item.productId,
                                                                        fromWhere:"checkd"}}}>查看</Link>
                                    <Link to={"/product/save"+item.productId}>编辑</Link>
                                    <button className="btn btn-warning edit">删除</button>
                                </td>
                                </tr>
                              )  
                            })}
                                
                            </tbody>
                       </table>
                       <Pagination 
                                    showQuickJumper
                                    showSizeChanger
                                    defaultPageSize={5}
                                    defaultCurrent={1}
                                    onChange={this.onChange.bind(this)}
                                    
                                    total={this.props.productListByCategoryId.length}
                        />
                    </div>
                </div>
            </div>
                
            
        )
    }
}
export default ProductDetail